<template>
  <el-form ref="form" :model="emp" :rules="formRules" label-width="80px">

    <el-form-item label="姓名" prop="name">
      <el-input v-model="emp.name" placeholder="请输入姓名" type="text"></el-input>
    </el-form-item>

    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="emp.age" type="number" placeholder="请输入年龄"></el-input>
    </el-form-item>

    <el-form-item label="日期" prop="bir">
      <div class="block">
        <el-date-picker
          v-model="emp.bir"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
    </el-form-item>

    <el-form-item label="内容" prop="content">
      <el-input v-model="emp.content" placeholder="请输入内容" type="text"></el-input>
    </el-form-item>

    <el-form-item label="地址" prop="address">
      <el-input v-model="emp.address" placeholder="请输入地址" type="text"></el-input>
    </el-form-item>

    <el-form-item align="left">
      <el-button type="primary" @click.prevent="handleUpdate">修改</el-button>
      <el-button @click="backForm">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
    export default {
        name: "UpdateEmp",
      data() {
        return {
          emp: {},
          formRules: {//表单校验规则
            name: [{required: true, message: "姓名不能为空", trigger: "blur"}],
            age: [{required: true, message: "年龄不能为空", type: 'number', trigger: "blur"},
              // {min: 1, max: 100, message: "年龄在0~100之间", trigger: "blur"}
            ],
            bir: [{required: true, message: "日期不能为空", trigger: "blur"},],
            content: [//username项的校验规则，每一项规则可以有多个要求
              {required: true, message: "内容不能为空", trigger: "blur"},
              // {min:0,max:100,message: "长度在0~100之间",trigger: "blur"}
            ],
            address: [//password项的校验规则
              {required: true, message: "地址不能为空", trigger: "blur"}
            ]
          },

        }
      },
      created() {
        let id = this.$route.query.id;
        this.axios.get("/emp/"+id).then(resp=>{
          if(resp.data!=null){
            console.log(resp.data)
            this.emp=resp.data;
          }else {
            alert("服务器忙")
          }
        }).catch(error=>{
          console.log(error)
        });
      },

      methods:{
        handleUpdate(){
          this.$refs["form"].validate((valid)=> {
            if(valid) {
              console.log(this.emp)
              this.axios.put("/emp",this.emp).then(resp => {
                if (resp.data.status == "success") {
                  this.$message.success("修改成功");
                  let pageNum = this.$route.query.pageNum
                  this.$router.push({path:"/show",query:{pg:pageNum}})
                } else {
                  alert("服务器忙")
                }
              }).catch(error => {
                console.log(error)
              })
            }else {
              this.$message.success("校验失败，不可以提交表单");
            }
          })
        },
        backForm(){
          this.$message({
            message: '取消修改',
            type: 'warning'
          });
          let pageNum = this.$route.query.pageNum
          this.$router.push({path:"/show",query:{pg:pageNum}})
        }
      }
    }
</script>

<style scoped>

</style>
